<template>
  <el-dialog
    @close="close"
    title="添加模式"
    :visible.sync="dialogComponents"
    width="35%"
    :modal-append-to-body=false
  >
    <el-form ref="formInline" size="mini" :rules="rules" :model="formInline" label-width="100px">
      <el-form-item prop="account" label="模式名称" >
        <el-input placeholder="请对应游戏填写该游戏的模式，比如 双排模式、灵活组排..." v-model="formInline.modeNum" :disabled = disableAccount class="gameed_inpu"></el-input>
      </el-form-item>
      <el-form-item prop="account" label="模式人数" >
        <el-input placeholder="请填写该模式需要的人数" v-model="formInline.modeName" :disabled = disableAccount class="gameed_inpu"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="dialogComponents = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="onSubmit()">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
  export default {
    name: 'AddMode',
    props: {
      dialogComponents: {
        default: false,
        type: Boolean
      },
      name: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        dialog: true,
        btnLoading: false,  // 提交按钮状态
        disableAccount : false,
        formInline: {
          modeNum:'',
          modeName:'',
        },
        bigServer:'',
        rules: {
          /* account: [
             { required: true, message: '请输入账号', trigger: 'blur' }
           ]*/
        }
      }
    },
    mounted() {
      this.dialog = this.dialogComponents
      if (this.name) {
      }else{

      }
    },
    methods: {
      // 添加区服
      addAreaServer(){
        let inputParam = {value:''};
        this.server_list.push(inputParam)
      },
      // 删除区服事件
      deleteServer(index){
        this.server_list.splice(index,1)
      },
      // 关闭弹窗
      close() {
        this.$emit('close')
      },
      // 提交信息
      onSubmit() {
        debugger
        this.$emit('modeNum',this.formInline.modeNum)
        this.$emit('modeName',this.formInline.modeName)
        this.dialogComponents = false
      },
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .gameed_inpu{
    width:350px;
  }

</style>


